<template>
	<view class="app-content">
		<view class="a1">
			<view class="flex1">
				<view class="item1">
					<image class="must" src="https://pw.qyang.cc/static/must.png" mode=""></image>姓名
				</view>
				<view class="item2">
					<u-input placeholder="请输入" border="none" inputAlign="right" v-model='model.real_name'></u-input>
				</view>
			</view>

			<view class="flex">
				<view class="item1">
					<image class="must" src="https://pw.qyang.cc/static/must.png" mode=""></image>身份证
				</view>
				<view class="item2">
					<view class="pic" style="margin-right: 68rpx;">
						<view class="" @click="chooseImage('front_image')">
							<image src="https://pw.qyang.cc/static/user-zheng2.png" mode="widthFix" style="width: 292rpx;height: 190rpx;" v-if="!model.front_image">
							</image>
							<image :src="rq.imgUrl(model.front_image)" style="width: 292rpx;height: 190rpx;" v-else @click="chooseImage('front_image')"></image>
							<view class="text">
								点击上传 <span class="text1">人像面</span>
							</view>
						</view>						
					</view>
					<view class="pic">
						<view class="" @click="chooseImage('reverse_image')">
							<image src="https://pw.qyang.cc/static/user-zheng1.png" mode="widthFix" style="width: 292rpx;height: 190rpx;" v-if="!model.reverse_image">
							</image>
							<image :src="rq.imgUrl(model.reverse_image)" style="width: 292rpx;height: 190rpx;" v-else @click="chooseImage('reverse_image')"></image>
							<view class="text">
								点击上传 <span class="text1">国徽面</span>
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="btn" @click="submit">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model:{
					front_image: '',
					reverse_image: '',
					real_name:''
				},				
			};
		},
		onShow() {
			uni.$on('real', (data) => {
				console.log(data)
				if (data) {
					this.model.front_image=data.front_image
					this.model.reverse_image = data.reverse_image
					this.model.real_name = data.real_name
				}
		
			})
		},
		onUnload() {
			uni.$off('real')
		},
		methods: {
			submit(){
				if(!this.model.real_name){
					uni.showToast({
						title:'请输入真实姓名',
						icon:'none'
					})					
					return 
				}
				if(!this.model.front_image){
					uni.showToast({
						title:'请上传身份证人像面',
						icon:'none'
					})					
					return 
				}
				if(!this.model.reverse_image){
					uni.showToast({
						title:'请上传身份证国徽面',
						icon:'none'
					})					
					return 
				}
				const pages = getCurrentPages();
				const prevPage = pages[pages.length - 2];
				
				uni.navigateBack({
					success: () => {
						// prevPage.onShow();
						prevPage.$vm.receiveReal(this.model);
					}
				});
			},
			chooseImage(field){
				let _this = this
				uni.chooseImage({
					count:1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album','camera'],
					success(res) {
						uni.showLoading({
							mask: true,
							title: '正在上传'
						})
						console.log(res.tempFilePaths)
						getApp().uploadFile(res.tempFilePaths,{},(url)=>{
							console.log(url)
							_this.model[field] = url.length>0?url[0]:''
							console.log(_this.model[field])
							uni.hideLoading()
						})
					}	
				})
			},
		}
	}
</script>

<style lang="scss">
	.app-content {
		height: 100vh;
		background-color: #FFFFFF;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		z-index: 1;

		.btn {
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 38rpx;
			text-align: center;
			line-height: 88rpx;
			margin: 15rpx 64rpx;
			background: #FF5866;
			border-radius: 102px;
			border: 1px solid #FF5866;
		}
	}

	.a1 {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 40rpx 50rpx;
		display: flex;
		flex-direction: column;
		gap: 25rpx;

		.flex {
			display: flex;
			flex-direction: column;

			.item1 {
				font-size: 14px;
				font-weight: normal;
				line-height: 14px;
				letter-spacing: 0px;
				color: #333333;
				margin-bottom: 20rpx;

				.must {
					width: 15rpx;
					height: 15rpx;
					margin-right: 10rpx;
				}
			}

			.item2 {
				display: flex;
				font-family: PingFang SC;
				font-size: 14px;
				font-weight: normal;
				line-height: 15px;
				letter-spacing: 0px;
				text-align: center;
				
				.text {
					color: #333333;
					margin-top: 20rpx;
				}

				.text1 {
					color: #FF7681;
					margin-top: 20rpx;
				}
			}

		}

		.flex1 {
			border-bottom: 1rpx solid #e9e9e9;
			padding-bottom: 25rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;



			.item1 {
				font-size: 14px;
				font-weight: normal;
				line-height: 14px;
				letter-spacing: 0px;

				color: #333333;

				.must {
					width: 15rpx;
					height: 15rpx;
					margin-right: 10rpx;
				}
			}

			.item2 {
				display: flex;
				align-items: center;
				gap: 20rpx;
				font-family: PingFang SC;
				font-size: 13px;
				font-weight: normal;
				line-height: 14px;
				text-align: right;
				letter-spacing: 0px;

				color: #999999;
			}
		}
	}
</style>